<template >
  <div class="home addPro">
    <!-- <div class="title row">
      <p>新建项目</p>
      <div>
        <el-button icon="el-icon-arrow-left" @click="Return"> 返回 </el-button>
      </div>
    </div> -->
    <!-- 项目 -->
    <div class="main">
      <div class="tag row">
        <el-button type="text" icon="el-icon-arrow-left" @click="Return"></el-button>
        <div class="tag1">{{pageName}}</div>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
      <div class="main-body">
        <el-form
          class="body-form"
          :model="infoLevel1"
          label-width="120px"
          :inline="true"
          :rules="rulesInfoLevel1"
        >
          <el-form-item
            class="form-item"
            prop="projectName"
            label="项目名称:"
          >
            <el-input v-model="infoLevel1.projectName"></el-input>
          </el-form-item>
          <el-form-item
            class="form-item"
            prop="projectChoice"
            label="项目类别:"
          >
            <el-select
              class="add-menu-level"
              v-model="infoLevel1.projectChoice"
              placeholder="请选择项目类别"
            >
              <el-option
                v-for="item in projectChoiceList"
                :key="item.id"
                :label="item.typeName"
                :value="item.typeName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            class="form-item"
            prop="projectEffect"
            label="工程用途:"
          >
            <el-select
              class="add-menu-level"
              v-model="infoLevel1.projectEffect"
              placeholder="请选择工程用途"
            >
              <el-option
                v-for="item in projectEffectList"
                :key="item.id"
                :label="item.purposeName"
                :value="item.purposeName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            class="form-item"
            prop="projectStatus"
            label="工程状态:"
          >
            <el-select
              class="add-menu-level"
              v-model="infoLevel1.projectStatus"
              placeholder="请选择工程状态"
            >
              <el-option
                v-for="item in projectStatusList"
                :key="item.id"
                :label="item.statusName"
                :value="item.statusName"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            class="form-item"
            prop="structureType"
            label="结构类型:"
          >
            <el-input v-model="infoLevel1.structureType"></el-input>
          </el-form-item>
          <el-form-item
            class="form-item"
            prop="projectScope"
            label="工程规模:"
          >
            <el-input v-model="infoLevel1.projectScope"></el-input>
          </el-form-item>
          <el-form-item class="form-item" label="合同日期:" required>
            <el-date-picker
              v-model="infoLevel1.startTime"
              type="date"
              placeholder="开始时间"
            >
            </el-date-picker>
            -
            <el-date-picker
              v-model="infoLevel1.endTime"
              type="date"
              placeholder="结束时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            class="form-item"
            prop="projectAddress"
            label="项目地址:"
          >
            <el-input
              v-model="infoLevel1.projectAddress"
              style="width: 600px"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item class="form-item introduce" label="项目介绍:">
      <tinymce :height="300" v-model="infoLevel1.projectIntroduce"/>
    </el-form-item> -->
          <el-form-item label="项目介绍:" > 
            <quill-editor
              class="editor"
              ref="myTextEditor"
              v-model="infoLevel1.projectIntroduce"
              :options="editorOption"
              @change="onEditorChange($event)"
            >
            </quill-editor> 
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// import Editor from '@tinymce/tinymce-vue'
import Tinymce from '@/components/Tinymce'
import {
  getProjectType,
  getProjectPurpose,
  getProjectStatus,
} from "@/api/dashboard";
import project from "@/api/acl/project"
export default {
  //  components:{   'editor': Editor },
  components:{Tinymce},
  data() {
    return {
      message: "",
      pageName:'项目添加',
      projectStatusList: [],
      projectChoiceList: [],
      projectEffectList: [],
      infoLevel1: {
        projectName: "", // 名称
        projectChoice: "", //项目类别
        projectEffect: "", // 用途
        projectStatus: "", // 状态
        structureType: "", //结构类型
        projectScope: "", //工程规模
        contractDate: "", //合同日期
        projectAddress: "", //项目地址
        projectIntroduce: "",
        startTime: "",
        endTime: "",
      },
      rulesInfoLevel1: {
        // projectChoice: [
        //   {
        //     required: true,
        //     message: "请选择项目类别",
        //     trigger: "change",
        //   },
        // ],
        // projectEffect: [
        //   {
        //     required: true,
        //     message: "请选择工程用途",
        //     trigger: "change",
        //   },
        // ],
        projectStatus: [
          {
            required: true,
            message: "请选择工程状态",
            trigger: "change",
          },
        ],
        projectName: [
          {
            required: true,
            message: "请输入项目名称",
            trigger: "blur",
          },
        ],
        // structureType: [
        //   {
        //     required: true,
        //     message: "请输入结构类型",
        //     trigger: "blur",
        //   },
        // ],
        // projectScope: [
        //   {
        //     required: true,
        //     message: "请输入工程规模",
        //     trigger: "blur",
        //   },
        // ],
        // contractDate: [
        //   {
        //     required: true,
        //     message: "请选择合同日期",
        //     trigger: "blur",
        //   },
        // ],
        projectAddress: [
          {
            required: true,
            message: "请输入项目地址",
            trigger: "blur",
          },
        ],
      },
      editorOption: {
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
            [{ script: "sub" }, { script: "super" }], // 上标/下标
            [{ indent: "-1" }, { indent: "+1" }], // 缩进
            // [{'direction': 'rtl'}],                         // 文本方向
            [{ size: ["small", false, "large", "huge"] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            // [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: [] }], // 字体种类
            [{ align: [] }], // 对齐方式
            ["clean"], // 清除文本格式
            ["link", "image"], // 链接、图片、视频
          ], //工具菜单栏配置
        },
        placeholder: "请在这里添加项目介绍", //提示
        readyOnly: false, //是否只读
        theme: "snow", //主题 snow/bubble
        syntax: true, //语法检测
      },
    };
  },
  created() {
    if(this.$route.query && this.$route.query.id){
      this.pageName='项目修改'
      this.getFormData()
    }
    getProjectType().then((res) => {
      // console.log(res.data.data)
      this.projectChoiceList = res.data.data;
    });
    getProjectPurpose().then((res) => {
      // console.log(res.data.data)
      this.projectEffectList = res.data.data;
    });
    getProjectStatus().then((res) => {
      // console.log(res.data.data)
      this.projectStatusList = res.data.data;
    });
  },
  methods: {
    Return() {
      // console.log("return")
      this.$router.go(-1);
    },
    getFormData(){
      var projectId=this.$route.query.id
      project.selectProject(projectId).then(res=>{
        console.log(res);
        var pro=res.data.project
        this.infoLevel1={
          projectName:pro.name,
          projectChoice:pro.projectType,
          projectEffect:pro.projectPurpose,
          projectStatus:pro.projectStatus,
          structureType:pro.structureType,
          projectScope:pro.scale,
          projectAddress:pro.address,
          projectIntroduce:pro.introduction,
          startTime:pro.startDataPlan,
          endTime:pro.endDataPlan,          
          }
      })
    },
    submit() {
      if(this.isSubmit(this.infoLevel1)){
        const data = {
          address:this.infoLevel1.projectAddress,
          endDataPlan:this.infoLevel1.endTime,
          id:this.$route.query.id,
          introduction:this.infoLevel1.projectIntroduce,//介绍
          name:this.infoLevel1.projectName,//名称
          projectPurpose:this.infoLevel1.projectEffect,//用途
          projectStatus:this.infoLevel1.projectStatus,//状态
          projectType:this.infoLevel1.projectChoice,//类别
          scale:this.infoLevel1.projectScope,//规模
          startDataPlan:this.infoLevel1.startTime,//开始时间
          structureType:this.infoLevel1.structureType//结构类型
        }
        console.log(data);
        if(this.$route.query && this.$route.query.id){
          project.projectUpdate(data).then(res=>{
            console.log(res);
            this.$message({
              type: "success",
              message: "修改成功!",
            });
            this.$router.push({ path: "/choose" });
          }).catch((res)=>{
            console.log(res);
            this.$message({ 
              type: "error",
              message: res.message,
            });
          })
        }else{
          project.projectSave(data).then(res=>{
            console.log(res);
            this.$message({
              type: "success",
              message: "添加成功!",
            });
            this.$router.push({ path: "/choose" });
          }).catch(res=>{
            console.log(res);
            this.$message({
              type: "error",
              message: res.message,
            });
          })
        }
      }
    },
    //是否能提交
    isSubmit(data) {
      if (!data.projectName) {
        this.messageAlert("请输入项目名称");
        return false;
      // } else if (!data.projectChoice) {
      //   this.messageAlert("请输入项目类别");
      //   return false;
      // } else if (!data.projectEffect) {
      //   this.messageAlert("请输入工程用途");
      //   return false;
      } else if (!data.projectStatus) {
        this.messageAlert("请选择工程状态");
        return false;
      // } else if (!data.structureType) {
      //   this.messageAlert("请输入结构类型");
      //   return false;
      // }else if (!data.projectScope) {
      //   this.messageAlert("请输入工程规模");
      //   return false;
      }else if(!data.startTime||!data.endTime){
        this.messageAlert('请选择合同日期')
        return false
      }else if(!data.projectAddress){
        this.messageAlert('请输入项目地址')
        return false
      }else {
        this.infoLevel1.startTime = this.formatDate(this.infoLevel1.startTime);
        this.infoLevel1.endTime = this.formatDate(this.infoLevel1.endTime);
        // console.log(this.infoLevel1)
        // this.infoLevel1.startTime.replace('T',' ').substring(0,19)
        return true;
      }
    },
    formatDate(time) {
      const d = new Date(time);
      const strMonth =
        d.getFullYear() +
        "-" +
        this.p(d.getMonth() + 1) +
        "-" +
        this.p(d.getDate());
      const resTime =
        this.p(d.getHours()) +
        ":" +
        this.p(d.getMinutes()) +
        ":" +
        this.p(d.getSeconds());
      return strMonth;
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    // 提示
    messageAlert(message) {
      this.$message({
        message: message,
        type: "warning",
      });
    },
    // 失去焦点
    onEditorBlur(editor) {},
    // 获得焦点
    onEditorFocus(editor) {},
    // 开始
    onEditorReady(editor) {},
    // 值发生变化
    onEditorChange(editor) {
      this.content = editor.html;
      console.log(editor);
    },
  },
};
</script>

<style lang="scss">
.ql-snow {
  width: 100%;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
}

.ql-editor {
    min-height: 300px;
}

.ql-toolbar.ql-snow .ql-formats {
    margin-right: 0;
}

.ql-snow .ql-picker.ql-size {
    width: 65px;
}

html,
body,
#app {
  height: 100%;
  width: 100%;
}
.home {
  min-height: 100%;
  width: 100%;
}
.row {
  display: flex;
  flex-direction: row;
}
.addPro {
  background-color: #F0F2F5;
  .tag {
    height: 50px;
    line-height: 50px;
    align-items: center;
    margin: -1px;
    background-color: #ffffff;
    border-bottom: solid 2px #e8e8e8;
  }
  .tag1 {
    margin-left: 20px;
    width: 90%;
    font-weight: 80;
  }
  .title {
    text-align: left;
    /* width: 100%; */
    padding-left: 20px;
    // border: solid 1px #e4e4e4;
    height: 55px;
    line-height: 20px;
    background-color: #f3f3f3;
    color: #999999;
    //   padding-top: 20px;
    padding-left: 10%;
    padding-right: 10%;
    font-size: 13px;
    align-items: center;
    div {
      width: 90%;
      text-align: right;
    }
    div .el-button {
      margin-top: 0;
      height: 35px;
      padding-top: 0;
      line-height: 35px;
      border-radius: 0;
      font-size: 13px;
    }
  }

  .main {
    margin: 30px 10% 0 10%;
    width: 80%;
    min-width: 950px;
    padding-top: 0;
    min-height: 100%;
    text-align: center;
  }

  .main-body {
    min-height: 90%;
    background-color: #ffffff;
    padding-top: 10px;
    padding-left: 10px;
    // margin: -1px;
    padding-bottom: 20px;
  }

  .form-item {
    min-height: 50px;
    line-height: 50px;
  }
  .introduce {
    // min-width: 950px;
    // margin-left: 100px;
    width: 100%;
    .el-form-item__content{
      width: calc(100% - 120px);
    }
  }
  .body-form {
    text-align: left;
    width: 80%;
    margin: 0 auto;
  }

  .form-center {
    padding-left: 150px;
  }

  .body-form .el-select {
    width: 220px;
    margin-top: 5px;
  }

  .form-item .el-input {
    width: 220px;
    margin-top: 5px;
    border-radius: 0;
  }

  .address .el-input {
    width: 580px;
  }

  .form-item .el-input__inner {
    border-radius: 0;
  }
  .editor{
    width: 100%;
  }
}
</style>